<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #app {
            width: 800px;
            height: 800px;
            margin: 0 auto;
        }

        .iphone {
            width: 375px;
            height: 729px;
            background-image: url(./bg3.png);
            background-repeat: no-repeat;
            margin: 50px auto;
            position: relative;
        }

        .header .l {
            color: black;
            position: absolute;
            left: 43px;
            top: 30px;
            color: #fff;
            font-size: 14px;
        }

        .header .r ul {
            position: absolute;
            right: 33px;
            top: 16px;
            width: 70px;
            display: flex;
            list-style: none;
        }

        .header .r li {
            background-repeat: no-repeat;
            background-size: cover;
            width: 15px;
            height: 15px;
            margin-right: 5px;
        }

        .header .r .l1 {
            background-image: url(./signal.svg);
        }

        .header .r .l2 {
            background-image: url(wifi.svg);
            margin-right: 2px;
        }

        .header .r .l3 {
            background-image: url(./battery.svg);
            width: 22px;
            position: relative;
        }

        .progress {
            background-color: #fff;
            position: absolute;
            top: 3px;
            left: 5px;
            height: 8.6px;
            width: 8px;
        }

        .main {
            margin: 0px auto;
            margin-left: 36px;
            width: 290px;
            height: 500px;
            padding-top: 70px;
        }

        .bigBox {
            width: 160px;
            height: 160px;
            background: linear-gradient(to bottom, #0E2B64, #4C72AA);
            border-radius: 15px;
        }

        .bigBox .f {
            display: block;
            color: #FFFFFF;
            margin-left: 13px;
            padding-top: 1px;
        }

        .bigBox .district {
            padding-top: 13px;
        }

        .bigBox .temprature {
            padding-left: 1px;
            padding-top: 1px;
            font-size: 40px;
        }

        .bigBox .wz {
            display: flex;
            padding-top: 10px;
        }

        .bigBox .l {
            writing-mode: vertical-rl;
            text-orientation: upright;
            font-size: 14px;
        }

        .bigBox .r {
            position: relative;
            font-size: 25px;
            bottom: 3px;
        }

        .bigBox .fontBox {
            display: flex;
        }

        .smallBox {
            padding-left: 15px;
            height: 60px;
            width: 50px;
        }

        .smallBox .t {
            width: 50px;
            height: 50px;
            background-repeat: no-repeat;
            background-size: cover;
        }

        .smallBox .b {
            font-size: 13px;
            color: #F7F4F1;
            text-shadow: 0 0 5px #C3CBD0, 0 0 3px #666;
            text-align: center;
            display: block;
            padding-top: 4px;
        }

        .mergeBox {
            display: flex;
        }

        .firstBox {
            display: flex;
            flex-wrap: wrap;
        }

        .faceTime {
            background-image: url(./faceTime.png);

        }

        .calendar {
            background-image: url(./calendar.png);
            border-radius: 15px;
        }

        .email {
            background-image: url(./email.png);
        }

        .notes {
            background-image: url(./notes.png);

        }

        .notice {
            background-image: url(./notice.png);
        }

        .clock {
            background-image: url(./clock.png);
        }

        .appStore {
            background-image: url(./appStore.png);
        }

        .map {
            background-image: url(./map.png);
        }

        .weather {
            background-image: url(./weather.png);
            border-radius: 10px;
        }

        .health {
            background-image: url(./health.png);
            border-radius: 10px;
        }

        .setting {
            background-image: url(./setting.png);
            border-radius: 10px;
        }

        .wallet {
            background-image: url(./wallet.png);
            background-size: cover;
            background-position: center center;
        }

        .photo {
            background-image: url(./photo.png);
            border-radius: 10px;
        }

        .camera {
            background-image: url(./camera.png);
        }

        .watch {
            background-image: url(./watch.png);
        }

        .calculator {
            background-image: url(./calculator.png);
        }
        .stress{
            background-image: url(./stress.png);
            border-radius: 13px;
        }

        .row {
            margin-right: 8px;
            margin-top: 30px;
            display: flex;
            justify-content: left;
            position: relative;
        }


        .row .smallBox {
            height: 60px;
            width: 55px;
            padding-left: 15px;
            margin-right: 2px;
        }

        .row .transparentBox {
            height: 60px;
            width: 55px;
            display: flex;
            flex-wrap: wrap;
            margin-left: 16px;
        }
        .row .transparentBox .t{
            width: 50px;
            height: 50px;
            background-color: rgba(0, 0, 0, 0.6);
            border-radius: 15px;
            display: flex;
            justify-content: center;
        }
        .row .transparentBox .t .smallApp{
            width:11px;
            height: 11px;
            background-repeat: no-repeat;
            background-size: cover;
            border-radius: 5px;
            margin-right: 4px;
            margin-top: 8px;
        }
        .row .transparentBox .t .right{
         
            margin-right: 1px;
        }
        .watchHealth{
            background-image: url(./watchHealth.png);
        }
        .autoSleep{
            background-image: url(./autoSleep.png);
        }
        .row .transparentBox .b{
            display: block;
            font-size: 13px;
            color: #F7F4F1;
            text-shadow: 0 0 5px #C3CBD0, 0 0 3px #666;
            text-align: center;
            padding-top: 4px;
            width: 52px;
        }
        .footer{
            width: 290px;
            height: 85px;
            margin: 0 auto;
            margin-top: 48px;
        }
        .footer .t{
            height: 20px;
            width: 50px;
            margin: 0 auto;
            background-color: rgba(0, 0, 0, 0.4);
            border-radius: 15px;
            display: flex;
            justify-content: center;
        }
        .footer .t .l{
            margin: 6px 4px;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background-color:#9E968D;
        }
        .footer .t .r{
            margin: 6px 4px;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background-color:#72665A;
        }
        .footer .b{
            height: 50px;
            width: 220px;
            margin: 0 auto;
            margin-top: 10px;
            background-color: rgba(0,0,0,0.4);
            border-radius: 35px;
            display: flex;
            justify-content: center;
        }
        .footer .b div{
            width: 36px;
            height: 36px;
            background-repeat: no-repeat;
            background-size: cover;
            margin:5px 5px;
            border-radius: 10px;
        }
        .call{
            background-image: url(./call.png);
        }
        .message{
            background-image: url(./message.png);
        }
        .safari{
            background-image: url(./safari.png);
        }
        .wechat{
            background-image: url(./wechat.png);
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="iphone">
            <header class="header">
                <div class="l">12:44</div>
                <div class="r">
                    <ul>
                        <li class="l1"></li>
                        <li class="l2"></li>
                        <li class="l3">
                            <div class="progress"></div>
                        </li>
                    </ul>
                </div>
            </header>
            <main class="main">
                <div class="mergeBox">
                    <div class="bigBox">
                        <span class="f district">开福区</span>
                        <span class="f temprature">30°</span>
                        <span class="f">大部多云</span>
                        <div class="fontBox">
                            <div class='f wz'>
                                <div class="l">最高</div>
                                <div class='r'>31°</div>
                            </div>
                            <div class='f wz'>
                                <div class="l">最低</div>
                                <div class='r'>21°</div>
                            </div>
                        </div>
                    </div>
                    <div class="firstBox">
                        <div class="smallBox">
                            <div class="t faceTime"></div>
                            <span class="b">FaceTime</span>
                        </div>
                        <div class="smallBox">
                            <div class="t calendar"></div>
                            <span class="b">Calendar</span>
                        </div>
                        <div class="smallBox">
                            <div class="t email"></div>
                            <span class="b">Email</span>
                        </div>
                        <div class="smallBox">
                            <div class="t notes"></div>
                            <span class="b">Notes</span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="smallBox">
                        <div class="t notice"></div>
                        <span class="b">提醒事项</span>
                    </div>
                    <div class="smallBox">
                        <div class="t clock"></div>
                        <span class="b">时钟</span>
                    </div>
                    <div class="smallBox">
                        <div class="t appStore"></div>
                        <span class="b">AppStore</span>
                    </div>
                    <div class="smallBox">
                        <div class="t map"></div>
                        <span class="b">地图</span>
                    </div>
                </div>
                <div class="row">
                    <div class="smallBox">
                        <div class="t weather"></div>
                        <span class="b">天气</span>
                    </div>
                    <div class="smallBox">
                        <div class="t health"></div>
                        <span class="b">健康</span>
                    </div>
                    <div class="smallBox">
                        <div class="t setting"></div>
                        <span class="b">设置</span>
                    </div>
                    <div class="smallBox">
                        <div class="t wallet"></div>
                        <span class="b">钱包</span>
                    </div>
                </div>
                <div class="row">
                    <div class="smallBox">
                        <div class="t photo"></div>
                        <span class="b">照片</span>
                    </div>
                    <div class="smallBox">
                        <div class="t camera"></div>
                        <span class="b">相机</span>
                    </div>
                    <div class="smallBox">
                        <div class="t watch"></div>
                        <span class="b">Watch</span>
                    </div>
                    <div class="smallBox">
                        <div class="t calculator"></div>
                        <span class="b">计算器</span>
                    </div>
                </div>
                <div class="row">
                    <div class="transparentBox firstBox">
                        <div class="t">
                            <div class="smallApp autoSleep first"></div>
                            <div class="smallApp watchHealth"></div>
                            <div class="smallApp right stress"></div>
                        </div>
                        <span class="b">医疗保健与健身</span>
                    </div>
                    <div class="transparentBox">
                        <div class="t">
                        </div>
                        <div class="b">文件夹</div>
                    </div>
                </div>
            </main>
            <footer class="footer">
                <div class="t">
                    <div class="l"></div>
                    <div class="r"></div>
                </div>
                <div class="b">
                    <div class="call"></div>
                    <div class="message"></div>
                    <div class="safari"></div>
                    <div class="wechat"></div>
                </div>
            </footer>
        </div>
    </div>
</body>

</html>